<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
   
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Front-end design patterns</title>
	<link rel="stylesheet" href="global.css" type="text/css" >
	<link rel="stylesheet" href="extensions/wireframe.css" type="text/css" >
</head>
<body>
    
    <div id="container">
    
        <div id="branding">
          <h1 id="logo"><a href="/">Logo text</a></h1>
                    
          <ul id="nav-main">
            <li id="nav-xx1"><a href="#">Navi item 1</a></li>
            <li id="nav-xx2"><a href="#">Navi item 2</a></li>
            <li id="nav-xx3"><a href="#">Navi item 3</a></li>
          </ul>
            
          <ul id="nav-supp">
            <li id="sign-in"><a href="#">Signin</a></li>
            <li id="register"><a href="#">Register</a></li>
          </ul>
            
          <div id="search">
            <form action="#" method="post">
              <fieldset>
                <label for="search-field">Hae</label> 
                <input type="text" id="search-field" name="search-field">
                <!-- ajax only 
                  <ol class="search-results">
                    <li><a href="#">Result 1</a></li>
                    <li class="show-all"><a href="#">Show all</a></li>
                  </ol>-->
                </fieldset>
                <fieldset>
                  <input type="submit" value="Search" class="btn">
                </fieldset>
              </form>
          </div>
          
        </div>
        
        <div class="content">
            <div class="content-main">content main</div>
            <div class="content-sub">content sub</div>
            <div class="content-extra">content extra</div>
            <div class="content-xxxx">content xxxx</div>
        </div>
        
        <p class="breadcrumb"><a href="#">breadcrumb</a> <span>current page</span></p>
        
        <form action="." id="rate" title="Rate this">
        	<fieldset>
            <label for="rating">Rating</label>
              <select name="rating" id="rating">
                <option>no rating</option>
                <option value="1" class="worst">1</option>
                <option value="2" class="bad">2</option>
                <option value="3" class="fair">3</option>
                <option value="4" class="good">4</option>
                <option value="5" class="best">5</option>
              </select>
        	</fieldset>
        	<fieldset>
            <input type="submit" value="Rate" class="btn">
          </fieldset>
        </form>
        
        <ol class="entry-comments">
            <li id="r1" class="odd even authorname">
                <div class="meta">
                    <div class="vcard">
                        <h4><a href="#r1" title="Permalink this reply">#1</a> &bull; <span class="fn url"><a href="http://twitter.com/mattwilcox">Matt Wilcox</a></span></h4>
                        <img src="#" class="photo" alt="">    
                    </div>
                    <abbr title="2008-10-25">Oct 25th 2008 &bull; 10:30 <sup>pm</sup></abbr>
                </div>
                <blockquote>
                    <p>Been using rgba in a few recent projects, and was delighted to hear dave storey tell me that presro2.2 would support it. Makes a world of difference.</p>
                </blockquote>
            </li>   
        </ol>
        
        <div class="content">
            
            <form action="" method="post" id="frm-signin" name="frm-signin">
                <h2>Sign in</h2>
                <div class="success">
                    <p>Positive message</p>
                </div>
                <div class="notice">
                    <p>Notification message</p>
                </div>
                <div class="error">
                    <p>Error message</p>
                </div>
                <fieldset>
                  <ol>
                    <li>
                      <label for="username">Username / email: <em>required</em> <strong>Error message</strong></label>
                      <input type="text" name="username" id="username">
                      <span class="help-text">Help text here</span>
                    </li>
                    <li>
                      <label for="password">Password: <em>required</em> <strong>Password must be</strong></label>
                      <input type="password" name="password" id="password">
                      <span class="help-text">Help text here</span>
                    </li>
                  </ol>
                </fieldset>
                <fieldset>
                  <input type="submit" value="Sign in" class="btn">
                </fieldset>
            </form>
            
            <div class="content-signin">
                <div>
                    <h3>What is application x?</h3>
                    <p>Ipsum lorem for <a href="#">Link</a></p>
                </div>
                <div>
                    <h3>Invite friend</h3>
                    <p>Ipsum lorem for <a href="#">Link</a></p>
                </div>
            </div>
            
        </div>
        
        <div class="content">
            <h2>Register</h2>
            <p>Ipsum lorem lorem.</p>
            <form action="" method="post" id="frm-registereasy" name="frm-registereasy">
                <div class="success">
                    <p>Positive message</p>
                </div>
                <div class="notice">
                    <p>Notification message</p>
                </div>
                <div class="error">
                    <p>Error message</p>
                </div>
                <fieldset>
                  <ol>
                    <li>
                      <label for="username">Email: <em>required</em> <strong>errormessage</strong></label>
                      <input type="text" name="email" id="email">
                      <span class="help-text">Help text here</span>
                    </li>
                    <li>
                      <label for="password">Password:</label>
                      <input type="text" name="password" id="password">
                      <span class="help-text">Insert optional help text</span>
                    </li>  
                  </ol>
                </fieldset>
                <fieldset>
                  <input type="submit" value="Register" class="btn">
                </fieldset>
            </form>
        </div>
        
        <div class="content">
            <h2>Register</h2>
            <p>Ipsum lorem lorem.</p>
            <form action="" method="post" id="frm-registerlazyajax" name="frm-registerlazyajax">
                <div class="success">
                    <p>Positive message</p>
                </div>
                <div class="notice">
                    <p>Notification message</p>
                </div>
                <div class="error">
                    <p>Error message</p>
                </div>
                <fieldset>
                  <ol>
                    <li>
                      <label for="username">Email:<em>required</em> <strong>errormessage</strong></label>
                      <input type="text" name="email" id="email">
                      <span class="help-text">Help text here</span>
                    </li>
                    <li>
                      <label for="password">Password:</label>
                      <input type="text" name="password" id="password">
                      <span class="help-text">Insert optional help text</span>
                    </li>  
                  </ol>
                </fieldset>
                <fieldset>
                  <input type="submit" value="Register" class="btn">
                </fieldset>
            </form>
        </div>
        
        <div class="content">
            <h2>Tell a friend</h2>
            <p>Ipsum lorem lorem.</p>
            <form action="" method="post" id="frm-tellafriend" name="frm-tellafriend">
                <div class="success">
                    <p>Positive message</p>
                </div>
                <div class="notice">
                    <p>Notification message</p>
                </div>
                <div class="error">
                    <p>Error message</p>
                </div>
                <div class="preview">
                    <p class="friend_email">Your friend's email:</p>
                    <p class="content">Message content</p>
                </div>
                <fieldset>
                  <ol>
                    <li>
                      <label for="name">Your name:</label>
                      <input type="text" name="name" id="name">
                      <span class="help-text">Insert optional help text</span>
                    </li>
                    <li>
                      <label for="email">Your email:</label>
                      <input type="text" name="email" id="email">
                      <span class="help-text">Insert optional help text</span>
                    </li>
                    <li>
                      <label for="email">Friend's email:</label>
                      <input type="text" name="friend-email" id="friend-email">
                      <span class="help-text">Insert optional help text</span>
                    </li>  
                    <li>
                      <label for="message">Message:</label>
                      <textarea id="message" name="message"></textarea>
                      <span class="help-text">Insert optional help text</span>
                    </li>    
                  </ol>
                </fieldset>        
                <fieldset>            
                  <input type="submit" value="Send message" name="sendmessage" id="sendmessage" class="btn">
                </fieldset>
            </form>
        </div>
        
        <!-- -->
        <ul class="steps-left">
            <li class="active">Step x: Step name</li>
            <li>Step x: Step name</li>
            <li>Step x: Step name</li>
            <li>Step x: Step name</li>
        </ul>
        
        <form action="." method="post" name="micropatterns">
            <fieldset>
                <ol>
                  <li>
                    <label for="field">Label:</label>
                    <input type="text" name="field" id="field">
                    <span class="help-text">Insert optional help text</span>
                  </li>
                  <li>
                    <label for="field-1">Label:</label>
                    <input type="text" name="field" id="field-1">
                    <span class="help-text">Insert optional help text</span>
                  </li>
                </ol>
            </fieldset>
            <fieldset>
                <ol>
                  <li>
                    <label for="field2">Label:</label>
                    <input type="radio" name="field2" id="field2" value="radio">
                    <span class="help-text">Insert optional help text</span>
                  </li>
                  <li>
                    <label for="field2-1">Label:</label>
                    <input type="radio" name="field2-1" id="field2-1" value="radio">
                    <span class="help-text">Insert optional help text</span>
                  </li>
                </ol> 
            </fieldset>
            <fieldset>
                <ol>
                  <li>
                    <label for="field3">Label:</label>
                    <input type="checkbox" name="field3" id="field3" value="radio">
                    <span class="help-text">Insert optional help text</span>
                  </li>
                  <li>
                    <label for="field3-1">Label:</label>
                    <input type="checkbox" name="field3-1" id="field3-1" value="radio">
                    <span class="help-text">Insert optional help text</span>
                  </li>
                </ol>
            </fieldset>
            <fieldset>
                <ol>
                  <li>
                    <label for="field4">Label:</label>
                    <textarea id="field4" name="field4"></textarea>
                    <span class="help-text">Insert optional help text</span>
                  </li>
                  <li>
                    <label for="field4-1">Label:</label>
                    <textarea id="field4-1" name="field4-1"></textarea>
                    <span class="help-text">Insert optional help text</span>
                  </li>
                </ol>
            </fieldset>
            <fieldset>
                <ol>
                  <li>
                    <label for="field5">Label:</label>
                    <select id="field5" name="field5">
                        <option selected="selected">Select field</option>
                        <option value="Option 1">Option 1</option>
                        <option value="Option 2">Option 2</option>
                        <option value="Option 3">Option 3</option>
                    </select>
                    <span class="help-text">Insert optional help text</span>
                  </li>
                  <li>
                    <label for="field5-1">Label:</label>
                    <select id="field5-1" name="field5-1">
                        <option selected="selected">Select field</option>
                        <option value="Option 1">Option 1</option>
                        <option value="Option 2">Option 2</option>
                        <option value="Option 3">Option 3</option>
                    </select>
                    <span class="help-text">Insert optional help text</span>
                  </li>
                </ol>
            </fieldset>
        </form>
        <ul id="thumbnail-gallery">
            <li>
                <h3>Pic name</h3>
                <p class="description">Description</p>
                <a href="#" class="pic"><img src="#" alt=""></a>
                <ul class="meta">
                    <li class="username">username</li>
                    <li class="views">views</li>
                    <li class="comments">comments</li>
                </ul>
            </li>
            <li>
                <h3>Pic name</h3>
                <p class="description">Description</p>
                <a href="#" class="pic"><img src="#" alt=""></a>
                <ul class="meta">
                    <li class="username">username</li>
                    <li class="views">views</li>
                    <li class="comments">comments</li>
                </ul>
            </li>
        </ul>
        
        <ul class="tag-cloud">
            <li class="tag-xs"><a href="#">tag</a></li>
            <li class="tag-s"><a href="#">tag</a></li>
            <li class="tag-m"><a href="#">tag</a></li>
            <li class="tag-l"><a href="#">tag</a></li>
            <li class="tag-xl"><a href="#">tag</a></li>
        </ul>
        
        <div id="siteinfo">
            <p id="copyright">&copy; 200x company name</p>
            <ul id="nav-siteinfo">
                <li>Menu 1
                    <ul>
                        <li><a href="#">Submenu 1</a></li>
                    </ul>
                </li>
                <li>Menu 2</li>
                <li>Menu 3</li>
            </ul>
            <ul id="nav-legal">
                <li><a href="#"></a></li>
            </ul>
            <form action="." method="post" name="frm-feedback" id="frm-feedback">
                <fieldset>
                  <ol>
                    <li>
                      <label for="first-name">First name:</label>
                      <input type="text" name="first-name" id="first-name">
                      <span class="help-text">Insert optional help text</span>
                    </li>
                    <li>
                      <label for="last-name">Last name:</label>
                      <input type="text" name="last-name" id="last-name">
                      <span class="help-text">Insert optional help text</span>
                    </li>
                    <li>
                      <label for="comment">Comment:</label>
                      <textarea name="comment" id="comment"></textarea>
                      <span class="help-text">Insert optional help text</span>
                    </li>
                  </ol>
                </fieldset>
                <fieldset>
                  <input type="submit" value="Send" class="btn">
                </fieldset>
            </form>
            <div id="hcard-companyname" class="vcard">
                <div class="fn org">Company name</div>
                <a href="s.html" class="email">firstname.lastname@company.com</a>
                <div class="adr">
                    <div class="street-address">Unioninkatu 13</div>
                    <span class="locality">Helsinki</span>, 
                    <span class="postal-code">00100</span>
                    <span class="country-name">Finland</span>
                </div>
                <div class="tel">+358 123 4567</div>
                <ul class="tags">
                    <li><a href="http://kitchen.technorati.com/contacts/tag/servicedesign">service design</a></li>
                    <li><a href="http://kitchen.technorati.com/contacts/tag/webdesign">webdesign</a></li>
                </ul>
            </div>
                        
        </div>
  </div>
</body>
</html>
